<template>
	<view class="Email">
		<view 
			class="EmailList flex flex-1" 
			v-for="(item,index) in props.data" 
			:key="index"
			@touchstart="startLongPress(item.c_mdcode)" 
			@touchend="endLongPress" @touchcancel="endLongPress"
			@click="onClickDoc(item)"
		>
			<view class="EmailListBorder">
				<view class="Email-top">
					<view v-if="item.c_read_status=='已阅'" style="background-color: RGBA(255,255,255,0);">
						<image src="@/static/img/read.png" mode="aspectFit" style="width: 25px;height: 40px;float: left;" class="image" />
					</view>
					<view v-else style="background-color: RGBA(255,255,255,0);">
						<image src="@/static/img/noread.png" mode="aspectFit" style="width: 25px;height: 40px;float: left;" class="image" />
					</view>
					<view class="Email-title sub_title ellipsis-1">{{item.c_title}}</view>
					<view class="Email-status">
						<span :style="{'color':item.c_read_status=='已阅'?'#01b0c6':'#f90'}"> {{item.c_read_status}}</span>
					</view>
				</view>
				<view class="sub_des ellipsis-1 margin-top-2" :style="{width:scrollWidth+'px'}">
					<span class="color-888"></span>{{item.c_doc_no}}
				</view>
				<view class="ellipsis-1 font-size-24 margin-top-10" :style="{width:scrollWidth+'px'}">
					<span class="font-size-24 color-888" style="color: #aaa;">时间:</span>{{item.c_rec_dt}}
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import service from '@/common/service'
	import { useMainStore } from '@/store/modules/store';
	import { useLoginStore } from '@/store/modules/useLoginStore';
	const mainStore = useMainStore();
	const LoginStore = useLoginStore();
	interface Props {
		data : object,
	}
	const props = defineProps<Props>();
	const emit = defineEmits(["change"]);
	const scrollWidth = ref(uni.getSystemInfoSync().windowWidth - 97);
	/**
	 *  长按处理程序
	 */
	const longPressTimeout = 1000; // 长按时长，单位毫秒
	const isLongPressed = ref(false);
	let longPressTimer : any;

	const startLongPress = (item : string) => {
		if (longPressTimer) {
			clearTimeout(longPressTimer);
		}
		longPressTimer = setTimeout(() => {
			isLongPressed.value = true;
			longPressHandle(item);
		}, longPressTimeout);
	}

	const endLongPress = () => {
		if (longPressTimer) {
			clearTimeout(longPressTimer);
			longPressTimer = null;
			isLongPressed.value = false;
		}
	}
	// 长按事件
	const longPressHandle = (value : string) => {
		console.log('111111111')
	}
	const onClickDoc = item => {
		console.log("item: " + JSON.stringify(item));
			let request = {
				url: LoginStore.EnjoyMain,
				data: {
					UniqueKey: "管易通40企业新闻",
					ObjectData:{
						BillId:item.c_link_key
					},
					MethodName: "GetDocDetail",
				},
			}
			service.request(request, (res) => {
				if (res && res.data) {
					if (!res.data.HasException) {
						const ObjectData = res.data.ObjectData.ds[0];				
							uni.navigateTo({
								url: './DocDetail?id=' + item.c_link_key+ '&c_id=' + item.c_id
							});
					} else {
						service.enjoyShowToast(res.data.Exception.Message)
					}
				}
			}, () => {
				console.log('失败')
			});
	}
</script>

<style lang="scss" scoped>
	@import '@/main.scss';

	.flex {
		display: flex;
	}

	.flex-1 {
		flex: 1;
	}

	.font-size-24 {
		font-size: 24rpx;
	}

	.ellipsis-1 {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.color-888 {
		color: #888;
	}

	.margin-top-2 {
		margin-top: 2rpx;
	}
    .margin-top-10 {
		margin-top: 15rpx;
	}

	.Email {
		display: flex;
		flex-direction: column;
		padding: 0 36rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-sizing: border-box;
		.EmailList {
			padding-bottom: 20rpx;
			border-bottom: solid 1px rgba(238, 238, 238, 1);
			&:last-child {
				border-bottom: none;
			}
		}
		.EmailListBorder {
			display: flex;
			flex-direction: column;
			width: 100%;
		}
		.Email-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.Email-title {
				flex: 1;
				margin-left: 20rpx;
				width: 0;
			}
			.Email-status {
				width: 80rpx;
				text-align: right;
			}
		}
	}
</style>